<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isCheckbox="true"
      :isNeedTree="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <!-- <table-tree :isCheckbox="true" :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree>-->

      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARKING_OPERATION:HISTORY:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
          </div>
          <!-- <div class="operate-btn-group" slot="operateBtnGroup">
                                        <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:TRADER:EXPORT')" @click.prevent="detialModal_open(0)">测试</a>
          </div>-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span
                  v-else-if="'parkingDuration' == props.prop"
                >{{ scope.row[props.prop] |formatTimeLength}}</span>
                <span v-else-if="'approchPlateUrl' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['approchCarUrl'])"
                  >
                    <img
                      class="parkingImg"
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.approchPlateUrl"
                    />
                  </a>
                </span>
                <span v-else-if="'leaveCarUrl' == props.prop">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['leaveCarUrl'])"
                  >
                    <img
                      class="parkingImg"
                      style="width: 60px;height:30px;"
                      alt="暂无"
                      :src="scope.row.leavePlateUrl"
                    />
                  </a>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <template slot="operateCell" slot-scope="props">
            <el-table-column :fixed="props.fixed" :label="props.label" min-width="120">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  class="ake_btn ake_font_btn ake_btn_text"
                  v-if="isPermmited('PARKING_OPERATION:HISTORY:EXPORT:DETAIL')"
                  @click.prevent="detialModal_open(scope.$index)"
                >详情</el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>
    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>

    <!-- xaingqing-modal -->
    <basic-modal ref="detialModal" width="980" customeClass="select-park-modal" static="true">
      <h3 slot="title">详情</h3>
      <div class="modal-body DetialCSS" slot="modal-body">
        <div class="main detialModalCSS">
          <div class="pic2">
            <span>
              <h3>进场图片</h3>
              <img :src="detialModalData.approchPlateUrl" alt class="in img" />
            </span>
            <span>
              <h3>出场图片</h3>
              <img :src="detialModalData.leavePlateUrl" alt class="out img" />
            </span>
          </div>
          <div class="text">
            <el-form :model="detialModalData" label-width="100px">
              <el-form-item prop="parkName" label="停车场 ">
                <span>{{detialModalData.parkName}}</span>
              </el-form-item>
              <el-form-item prop="plateNum" label="车牌">
                <span>{{detialModalData.plateNum}}</span>
              </el-form-item>
              <el-form-item prop="approchTime" label="进场时间">
                <span>{{detialModalData.approchTime}}</span>
              </el-form-item>
              <el-form-item prop="leaveTime" label="出场时间">
                <span>{{detialModalData.leaveTime}}</span>
              </el-form-item>
              <el-form-item prop="parkingDuration" label="停车时长">
                <span>{{detialModalData.parkingDuration |formatTimeLength}}</span>
              </el-form-item>
              <el-form-item prop="shouldValue" label="应收金额">
                <span>{{detialModalData.shouldValue | formatMoney}} 元</span>
              </el-form-item>
              <el-form-item prop="realValue" label="实收金额">
                <span>{{detialModalData.realValue | formatMoney}} 元</span>
              </el-form-item>
              <el-form-item prop="reliefValue" label="优惠金额">
                <span>{{detialModalData.reliefValue | formatMoney}} 元</span>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <el-table :data="detialModalData.detailList" style="width: 100%">
          <el-table-column prop="payOriginRemark" label="支付来源"></el-table-column>
          <el-table-column prop="payModeRemark" label="支付方式"></el-table-column>
          <el-table-column prop="realValue" label="支付金额"></el-table-column>
          <el-table-column prop="couponNameList" label="优惠券"></el-table-column>
          <el-table-column prop="reliefValue" label="优惠金额"></el-table-column>
          <el-table-column prop="payTime" label="支付时间" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.payTime | mileSecondToDate }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          :disabled="prevDisable"
          type="button"
          class="ake_btn ake_btn_text"
          @click="flipItem('prev')"
        >上一条</button>
        <button
          :disabled="nextDisable"
          type="button"
          class="ake_btn ake_btn_text"
          @click="flipItem('next')"
        >下一条</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import history from "./js/history.js";
export default {
  mixins: [common, stardardList, invokeModal, images, history],
  components: {
    BigPicModal
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

                { type: 'text', isShow: false, name: 'plate', text: '车牌号', value: '' },
                { type: 'text', isShow: false, name: 'cardNum', text: '卡票号', value: '' },
                { type: 'text', isShow: false, name: 'approchChannel', text: '进场通道', value: '' },
                { type: 'text', isShow: false, name: 'leaveChannel', text: '出场通道', value: '' },
                { type: 'text', isShow: false, name: 'approchVipType', text: '进场VIP类型', value: '' },
                { type: 'text', isShow: false, name: 'leaveVipType', text: '出场VIP类型', value: '' },
                { type: 'datePicker', isShow: false, name: 'query_time', text: '进场时间', propName: 'approchTimeFrom,approchTimeTo', value: '', style: { width: '360px' } },
            ],
            theadsInfo: [
                { index: 0, isShow: false, prop: 'reno', text: '序号', width: 64 },
                { index: 1, isShow: false, prop: 'plateNum', text: '车牌号', minWidth: 180 },
                { index: 2, isShow: false, prop: 'cardNum', text: '卡号', minWidth: 110 },
                { index: 3, isShow: false, prop: 'parkingDuration', text: '停车时长', minWidth: 110 },
                { index: 4, isShow: false, prop: 'approchVipType', text: '进场VIP类型', minWidth: 180 },
                { index: 5, isShow: false, prop: 'leaveVipType', text: '离场VIP类型', minWidth: 180 },
                { index: 6, isShow: false, prop: 'parkName', text: '停车场', minWidth: 180 },
                { index: 7, isShow: false, prop: 'approchTime', text: '进场时间', minWidth: 180 },
                { index: 8, isShow: false, prop: 'leaveTime', text: '出场时间', minWidth: 180 },
                { index: 9, isShow: false, prop: 'approchChannel', text: '进场通道', minWidth: 110 },
                { index: 10, isShow: false, prop: 'leaveChannel', text: '出场通道', minWidth: 110 },
                { index: 11, isShow: false, prop: 'approchPlateUrl', text: '进场车牌图片', minWidth: 140 },
                { index: 12, isShow: false, prop: 'leaveCarUrl', text: '出场车牌图片', minWidth: 140 },
                { index: 13, isShow: false, prop: 'shouldValue', text: '应收', minWidth: 110 },
                { index: 14, isShow: false, prop: 'realValue', text: '实收', minWidth: 110 },
                { index: 15, isShow: false, prop: 'reliefValue', text: '优惠', minWidth: 110 },

        {
          type: "text",
          isShow: false,
          name: "plate",
          text: "车牌号",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "cardNum",
          text: "卡票号",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "approchChannel",
          text: "进场通道",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "leaveChannel",
          text: "出场通道",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "approchVipType",
          text: "进场VIP类型",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "leaveVipType",
          text: "出场VIP类型",
          value: ""
        },
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "进场时间",
          propName: "approchTimeFrom,approchTimeTo",
          value: "",
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "plateNum",
          text: "车牌号",
          minWidth: 180
        },
        {
          index: 2,
          isShow: false,
          prop: "cardNum",
          text: "卡号",
          minWidth: 110
        },
        {
          index: 3,
          isShow: false,
          prop: "parkingDuration",
          text: "停车时长",
          minWidth: 110
        },
        {
          index: 4,
          isShow: false,
          prop: "approchVipType",
          text: "进场VIP类型",
          minWidth: 180
        },
        {
          index: 5,
          isShow: false,
          prop: "leaveVipType",
          text: "离场VIP类型",
          minWidth: 180
        },
        {
          index: 6,
          isShow: false,
          prop: "parkName",
          text: "停车场名称",
          minWidth: 180
        },
        {
          index: 7,
          isShow: false,
          prop: "approchTime",
          text: "进场时间",
          minWidth: 180
        },
        {
          index: 8,
          isShow: false,
          prop: "leaveTime",
          text: "出场时间",
          minWidth: 180
        },
        {
          index: 9,
          isShow: false,
          prop: "approchChannel",
          text: "进场通道",
          minWidth: 110
        },
        {
          index: 10,
          isShow: false,
          prop: "leaveChannel",
          text: "出场通道",
          minWidth: 110
        },
        {
          index: 11,
          isShow: false,
          prop: "approchPlateUrl",
          text: "进场车牌照片",
          minWidth: 140
        },
        {
          index: 12,
          isShow: false,
          prop: "leaveCarUrl",
          text: "出场车牌照片",
          minWidth: 140
        },
        {
          index: 13,
          isShow: false,
          prop: "shouldValue",
          text: "应收",
          minWidth: 110
        },
        {
          index: 14,
          isShow: false,
          prop: "realValue",
          text: "实收",
          minWidth: 110
        },
        {
          index: 15,
          isShow: false,
          prop: "reliefValue",
          text: "优惠",
          minWidth: 110
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {
    // confirmSearch(params) {
    //     this.getList();
    // }
  }
};
</script>

<style lang="less" scoped>
.DetialCSS {
  padding: 20px 35px;
  max-height: 480px;
  overflow-y: scroll;
  margin-right: -20px; // padding-right: 100px;
}

.common-table-wrapper
  button.el-button.ake_btn.ake_font_btn.ake_btn_text.el-button--primary.el-button--small {
  width: 50px;
}
</style>